﻿<!DOCTYPE html>
<html>
<head>
    <title>Guline SupperCMS </title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="product" content="Metro UI CSS Framework">
    <meta name="description" content="Simple responsive css framework">
    <meta name="author" content="Sergey S. Pimenov, Ukraine, Kiev">
    <meta name="keywords" content="js, css, metro, framework, windows 8, metro ui">

    <link rel="stylesheet" href="@Url.Content("~/Content/themes/admin/css/metro-bootstrap.min.css")">
    <link rel="stylesheet" href="@Url.Content("~/Content/themes/admin/css/iconFont.min.css")">
    <link rel="stylesheet" href="@Url.Content("~/Content/themes/admin/css/metro-bootstrap-responsive.min.css")">
    <script src="@Url.Content("~/Content/themes/admin/js/jquery/jquery-2.1.1.min.js")"></script>
    <script src="@Url.Content("~/Content/themes/admin/js/jquery-ui/jquery-ui.min.js")"></script>
    <script src="@Url.Content("~/Content/themes/admin/js/jquery-wheel/jquery.mousewheel.js")"></script>
    <script src="@Url.Content("~/Content/themes/admin/js/metro/metro.min.js")"></script>

    @RenderSection("scripts", required: false)
    <style>
        .validation-summary-errors ul li
        {
            color: #e51400 !important;
        }

        .field-validation-error
        {
            color: #e51400 !important;
        }
    </style>
</head>
<body class="metro" style="background-color: white;">
    <!--begin nav-->
    <nav class="navigation-bar dark fixed-top">
        <div class="navigation-bar-content">
            <a href="#" class="element"><span class="icon-console"></span>GULINE SYTEM <sup>2.0</sup></a>
            <span class="element-divider"></span>
            <a class="pull-menu" href="#"></a>
            <ul class="element-menu">

                <li>
                    <a class="dropdown-toggle" href="#"><i class="icon-diamond"></i>Services</a>
                    <ul class="dropdown-menu" data-role="dropdown">

                        <li>
                            <a href="#"><i class="icon-html5"></i>Web Application</a>

                        </li>
                        <li class="divider"></li>
                        <li><a href="#"><i class="icon-android"></i>Mobile application</a></li>
                        <li class="divider"></li>
                        <li><a href="#"><i class="icon-tv"></i>IT Training</a></li>
                    </ul>
                </li>
                <li><a class="dropdown-toggle" href="#"><i class="icon-blogger"></i>Blog</a>
                    <ul class="dropdown-menu" data-role="dropdown">
                        <li><a href="#"><i class="icon-newspaper"></i>News</a></li>
                        <li class="divider"></li>
                        <li><a href="#"><i class="icon-calculate"></i>Tutorials</a></li>
                        <li class="divider"></li>
                        <li><a href="#"><i class="icon-yelp"></i>Show-case</a></li>
                    </ul>
                </li>
                <li>
                    <a class="dropdown-toggle" href="#"><i class="icon-support"></i>Support</a>
                    <ul class="dropdown-menu" data-role="dropdown">
                        <li><a href="#"><i class="icon-help"></i>Genaral question</a></li>
                        <li><a href="#"><i class="icon-rocket"></i>Request support</a></li>
                        <li class="divider"></li>
                        <li><a href="#"><i class="icon-accessibility"></i>Contact us</a></li>
                    </ul>


            </ul>


            <div class="element place-right bg-red">
                <a class="dropdown-toggle place-right" href="#">
                    <span class="icon-user"></span>
                    @User.Identity.Name
                </a>
                <ul class="dropdown-menu place-right" data-role="dropdown">
                    <li><a href="#" id="dd_menu_login"><i class="icon-key"></i>Edit profiles</a></li>
                    <li><a href="#"><i class="icon-locked"></i>Logout</a></li>
                </ul>
            </div>


        </div>
    </nav>
    <!--end nav-->
    <div class="container" style="margin-top:50px;min-height:700px">
        @RenderBody()
    </div>
    <div class="gufooter bg-dark">
        <div class="container">
            <div class="grid">
                
                <div class="row fg-white">
                    <div class="span3">
                        <a href="#"><i class="icon-earth"></i>US - english</a>
                    </div>
                    <div class="span8">
                    </div>
                    <div class="span3 text-right">
                        Guline
                    </div>
                </div>
            </div>
        </div>
        <div class="container tertiary-text  fg-white text-right padding10">
            © 2014 Guline Solutions
        </div>
    </div>
    <script>
        //global variable

        ///////////////////////////////////////
        //delare values

        ///////////////////////////////////////
        $("#dd_menu_login").on('click', function () {
            $.Dialog({
                overlay: true,
                shadow: true,
                flat: false,
                icon: '<i class="icon-key"><i>',
                title: 'User Login',
                content: '',
                padding: 10,
                onShow: function (_dialog) {
                    var content = '<form onsubmit="return do_login(this);">' +
                        '<label>Login</label>' +
                        '<div class="input-control text"><input type="text" name="login"><button class="btn-clear"></button></div> ' +
                    '<label>Password</label>' +
                    '<div class="input-control password"><input type="password" name="password"> <button class="btn-reveal"></button></div> '
                    + '<div class="input-control checkbox"><label><input type="checkbox" name="c1" checked/><span class="check"></span>Remember</label></div>' +
                    '<div class="form-actions">' +
                    '<button class="button primary">Sign in</button> ' +
                    '<button class="button" type="button" onclick="$.Dialog.close()">Cancel</button> ' +
                    '</div>' +
                    '</form>';
                    $.Dialog.title("User login");
                    $.Dialog.content(content);
                    $.Metro.initInputs();
                }
            });
        });
        $("#google_social_button").on('click', function () {
            $.Dialog({
                overlay: true,
                shadow: true,
                flat: false,
                icon: '<i class="icon-google-plus"><i>',
                title: 'find us on Google+',
                content: '<div class="span6">goto: <a href="https://plus.google.com/111006574182643270267" target="_blank">https://plus.google.com/111006574182643270267</a></div>',
                padding: 10
            });
        });
        $("#facebook_social_button").on('click', function () {
            $.Dialog({
                overlay: true,
                shadow: true,
                flat: false,
                icon: '<i class="icon-facebook"><i>',
                title: 'find us on facebook',
                content: '<div class="span4"><iframe src="https://www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2FFacebookDevelopers&amp;width&amp;height=258&amp;colorscheme=light&amp;show_faces=true&amp;header=false&amp;stream=false&amp;show_border=false&amp;appId=655015851231238" scrolling="no" frameborder="0" style="border:none; overflow:hidden; height:258px;" allowTransparency="true"></iframe></div>',
                padding: 10

            });
        });
        //
        //////////////////////////////////////////////////////
        function do_login(form) {
            alert($(form).serialize());
            return false;
        }
        //////////////////////////////////////////////////////

    </script>

    <div id="fb-root"></div>
    <!-- Place this tag in your head or just before your close body tag. -->
    <script src="https://apis.google.com/js/platform.js" async defer></script>
    <script>
        (function (d, s, id) {
            var js, fjs = d.getElementsByTagName(s)[0];
            if (d.getElementById(id)) return;
            js = d.createElement(s); js.id = id;
            js.src = "https://connect.facebook.net/vi_VN/sdk.js#xfbml=1&appId=655015851231238&version=v2.0";
            fjs.parentNode.insertBefore(js, fjs);
        }(document, 'script', 'facebook-jssdk'));
    </script>

</body>
</html>
